<template>
  <el-dialog width="800px" :title="title" :visible.sync="dialogVisible" @close="handleClose">
    <el-alert
      v-if="submitForm.id!==''"
      :closable="false"
      style="margin-bottom: 20px"
      type="warning"
    >只能修改外发单价、外发供应商、备注信息</el-alert>
    <el-form
      ref="submitForm"
      v-loading="formLoading"
      :model="submitForm"
      :rules="submitFormRules"
      label-width="80px"
      label-position="right"
      class="submit-form"
      style="flex: 1"
    >
      <el-form-item label="外发日期" prop="date">
        <el-date-picker
          v-model="submitForm.date"
          style="width: 100%"
          type="date"
          placeholder="请选择外发日期"
          value-format="yyyy-MM-dd"
          clearable
        />
      </el-form-item>
      <el-form-item label="订单" prop="orderId">
        <sale-order-query
          ref="orderQuery"
          :disabled="submitForm.id!==''"
          :query="{ orderState: '0' }"
          @choose="handleChooseOrder"
        />
      </el-form-item>
      <el-descriptions v-if="orderInfo.id" style="padding-left: 100px" :column="columnNum">
        <el-descriptions-item label="客户">
          {{ orderInfo.customerName }}
        </el-descriptions-item>
        <el-descriptions-item label="品名">
          {{ productInfo.moldName }}
        </el-descriptions-item>
        <el-descriptions-item label="颜色">
          {{ productInfo.color }}
        </el-descriptions-item>
        <el-descriptions-item label="材质">
          {{ productInfo.material }}
        </el-descriptions-item>
        <el-descriptions-item label="尺码">
          {{ productInfo.size }}
        </el-descriptions-item>
        <el-descriptions-item label="长度">
          {{ productInfo.length }}
        </el-descriptions-item>
        <el-descriptions-item label="总数" content-class-name="red">
          {{ orderInfo.quantity }}
        </el-descriptions-item>
        <el-descriptions-item label="单价" content-class-name="red">
          <money-format v-model="orderInfo.unitPrice" />
        </el-descriptions-item>
        <el-descriptions-item label="总金额" content-class-name="red">
          <money-format v-model="orderInfo.amount" />
        </el-descriptions-item>
      </el-descriptions>
      <el-row>
        <el-col :span="12">
          <el-form-item label="外发数量" prop="quantity">
            <el-input v-model="submitForm.quantity" placeholder="请输入外发数量" disabled type="number" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外发单价" prop="unitPrice">
            <el-input v-model="submitForm.unitPrice" placeholder="请输入外发单价" type="number" />
          </el-form-item>
        </el-col>
        <el-descriptions style="padding-left: 100px" :column="columnNum">
          <el-descriptions-item label="预估利润" content-class-name="red">
            {{ profit }}元
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
      <el-form-item label="供应商" prop="supplierId">
        <supplier-query ref="supplierQuery" v-model="submitForm.supplierId" @choose="handleChooseSupplier" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="submitForm.remark" type="textarea" placeholder="请输入备注" :autosize="{minRows:2}" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="formLoading" type="text" @click="handleClose">取消</el-button>
      <el-button :loading="formLoading" type="primary" @click="handleSubmit">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { os_order_detail, os_order_save, os_order_update } from '@/api/sale/osOrder'
import { order_detail } from '@/api/sale/order'
import moment from 'moment/moment'

export default {
  name: 'OutsourcingModule',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      columnNum: 3,
      dialogVisible: this.visible,
      formLoading: false,
      title: '',
      orderInfo: {},
      productInfo: {},
      submitForm: {
        id: '',
        date: moment().format('YYYY-MM-DD'),
        orderId: '',
        supplierId: '',
        unitPrice: '',
        quantity: '',
        remark: ''
      },
      submitFormRules: {
        date: [{ required: true, message: '请选择外发日期', trigger: 'change' }],
        orderId: [{ required: true, message: '请选择订单', trigger: 'change' }],
        supplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
        unitPrice: [{ required: true, message: '请输入外发单价', trigger: 'change' }],
        quantity: [{ required: true, message: '请输入外发数量', trigger: 'change' }]
      }
    }
  },
  computed: {
    profit() {
      return ((Number(this.submitForm.unitPrice) - Number(this.orderInfo.unitPrice)) * this.submitForm.quantity).toFixed(2)
    }
  },
  methods: {
    init(id, orderId) {
      this.getOrderInfo(orderId)
      this.title = '修改外发订单'
      if (!id) {
        this.title = '新增外发订单'
        return
      }
      this.formLoading = true
      os_order_detail(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
          this.$refs.supplierQuery.init(resp.data.supplierName)
        }
      }).finally(() => {
        this.formLoading = false
      })
    },
    getOrderInfo(orderId) {
      if (orderId) {
        this.submitForm.orderId = orderId
        this.formLoading = true
        order_detail(orderId).then(resp => {
          if (resp.success) {
            this.orderInfo = resp.data
            this.productInfo = resp.data.productInfo
            this.$refs.orderQuery.init(resp.data)
            this.submitForm.quantity = resp.data.quantity
          }
        }).finally(() => {
          this.formLoading = false
        })
      }
    },
    handleSubmit() {
      this.$refs.submitForm.validate((valid) => {
        if (valid) {
          if (Number(this.submitForm.unitPrice) < Number(this.orderInfo.unitPrice)) {
            this.$confirm(`外发单价:${this.submitForm.unitPrice},低于订单单价:${this.orderInfo.unitPrice}，可能造成亏损，是否确认`, '外发提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.doSubmit()
            })
          } else {
            this.doSubmit()
          }
        }
      })
    },
    doSubmit() {
      let request = os_order_save
      if (this.submitForm.id) {
        request = os_order_update
      }
      this.tableLoading = true
      request(this.submitForm).then(resp => {
        if (resp.success) {
          this.$message.success('操作成功')
          this.$refs.submitForm.resetFields()
          this.$emit('close')
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    handleChooseOrder(row) {
      if (row) {
        this.submitForm.orderId = row.id
        this.submitForm.quantity = row.quantity
        this.orderInfo = row
        this.productInfo = row.productInfo
      }
    },
    handleChooseSupplier(row) {
      if (row) {
        this.submitForm.supplierId = row.id
      }
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
<style scoped>

</style>
